import React, { Component } from 'react'
// 导入本地图片方式1：在这里使用import这种方式导入
import imgSrc01 from './assests/images/image01.webp'
export default class App extends Component {
  state = {
    index: 5
  }
  render() {
    return (
      <div>
        <h3>网络图片：直接引用他的网络路径就行</h3>
        <h3>本地图片：使用import导入成js变量</h3>
        <img src={imgSrc01} alt="" />
        {/* 导入本地图片方式2：使用插值表达式 require('路径地址') */}
        <img src={require('./assests/images/image02.webp')} alt="" />
        <img src={require(`./assests/images/image0${this.state.index}.webp`)} alt="" />
      </div>
      /* 以上两种方式的区别在于，import导入的只能是个死路径
      而require导入的图片可以通过状态数据来渲染它的路径 */
    )
  }
}
